<template>
  <div>
    <!-- 分类 -->
    <div class="publicRank">
      <div class="title">
        <i class="iconfont icon-xiangzuo" @click="$router.go(-1), edit()"></i>
        <div class="story">现代言情</div>
      </div>

      <div class="pubContent">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="rankBooks">
            <li
              v-for="item in publicContent"
              :key="item.id"
              @click="
                $router.push({ name: 'synopsis', query: { id: item.id } })
              "
            >
              <div class="img">
                <img :src="item.img" />
              </div>

              <div class="content">
                <div class="textTit">
                  <h1>{{ item.title }}</h1>
                  <p>{{ item.scoring }}<span>分</span></p>
                </div>

                <div class="textCon">
                  {{ item.synopsis }}
                </div>

                <p>
                  <span>{{ item.type }}</span> · <span>{{ item.end }}</span> ·
                  <span>{{ item.number }}</span>
                </p>
              </div>
            </li>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommendRank } from "../../api/index";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      publicContent: [],
    };
  },
  created() {
    this.$emit("getnavs-btn", false);
    getRecommendRank().then((data) => {
      this.publicContent = data.recommendRank.like;
    });
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },

    edit() {
      this.$emit("getnavs-btn", true);
    },
  },
};
</script>

<style lang="less">
.publicRank {
  width: 100%;
  height: 100%;
  .title {
    position: fixed;
    width: 100%;
    min-height: 50px;
    display: flex;
    background-color: #f6f7f9;
    i {
      flex: 0 0 40px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
    }
    .story {
      flex: 1;
      // text-align: center;
      line-height: 50px;
      font-size: 18px;
      padding-left: 30%;
    }
  }
  .pubContent {
    padding-top: 50px;
    .rankBooks {
      padding: 15px;
      background-color: #fff;
      li {
        display: flex;
        margin-bottom: 20px;
        .img {
          width: 65px;
          height: 90px;
          border-radius: 5px;
          padding-right: 10px;
          img {
            width: 65px;
            height: 90px;
            border-radius: 5px;
          }
        }
        .content {
          flex: 1;
          .textTit {
            display: flex;
            justify-content: space-between;
            padding-bottom: 12px;
            h1 {
              font-weight: 600;
            }
            p {
              //   font-size: ;
              color: #ff6700;
              //   font-weight: 600;
              span {
                color: #ff6700;
                font-weight: normal;
              }
            }
          }
          .textCon {
            color: #646566;
            margin-bottom: 8px;
            line-height: 20px;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          p {
            display: block;
            span {
              color: #646566;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>